<template>
  <div class="attr-list">
    <div class="box-hd">
      <div class="title">手机</div>
    </div>
    <div class="box-bd">
      <div class="promo-list">
        <router-link to>
          <img :src="$target + 'public/imgs/phone/phone.png'" />
        </router-link>
      </div>
      <div class="myList">
        <!-- <MyList /> -->
        <ul>
          <!-- 直接遍历 phoneList 他就是所有数据-->
          <!-- ci是遍历的每一个数据 对象类型 -->
          <li v-for="c1 in phoneList" :key="c1.product_id">
            <router-link
              :to="{
                path: '/goods/attr',
                query: {
                  productID: c1.product_id
                }
              }"
            >
              <img :src="$target + c1.product_picture" alt="" />
              <h2>{{ c1.product_name }}</h2>
              <h3>{{ c1.product_title }}</h3>
              <p>
                <span>1599元</span>
                <span class="attr-del">1599元</span>
              </p>
            </router-link>
          </li>
          <li class="more">
            <a href="javascript:;">
              浏览更多 <i class="el-icon-d-arrow-right"></i
            ></a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GoodsAttr',
  data() {
    return {
      phoneList: '' //手机商品列表
    }
  },
  mounted() {
    this.getPromo('手机', 'phoneList')
  },
  methods: {
    getPromo(categoryName, val, api) {
      api = api != undefined ? api : '/api/product/getPromoProduct'
      this.$axios
        .post(api, {
          categoryName: categoryName
        })
        .then((res) => {
          // res.data.Product 是请求回来的数据  是一个数组
          // phoneList 默认是字符串 重新赋值为请求回来的数据
          // methods加载完phoneList就有数据了
          this.phoneList = res.data.Product
        })
        .catch((err) => {
          return Promise.reject(err)
        })
    },
    // 获取商品详细信息
    getDetails(val) {
      this.$axios
        .post('/api/product/getDetails', {
          productID: val
        })
        .then((res) => {
          this.productDetails = res.data.Product[0]
        })
        .catch((err) => {
          return Promise.reject(err)
        })
    }
  }
}
</script>

<style lang="less" scoped>
.box-hd {
  width: 1225px;
  margin: 0 auto;
  padding: 15px 0;
  font-size: 22px;
}
.promo-list {
  width: 234px;
  a {
    img {
      width: 234px;
    }
  }
}
.myList {
  ul {
    display: flex;
    flex-wrap: wrap;

    li {
      width: 234px;
      margin: 0 0 14.5px 13.7px;
      text-align: center;
      padding: 10px 0;
      background-color: white;
      transition: all 0.2s linear;
      &:hover {
        box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
        transform: translate3d(0, -2px, 0);
      }
      a {
        img {
          width: 160px;
          height: 160px;
          margin: 0 37px;
        }
        h2 {
          margin: 25px 10px 0;
          text-align: center;
          font-size: 14px;
          color: #333;
        }
        h3 {
          margin: 5px 10px;
          text-align: center;
          color: #b0b0b0;
          font-size: 12px;
        }
        p {
          margin: 10px;
          text-align: center;
          font-size: 16px;
          color: #ff6700;
          .attr-del {
            margin-left: 8px;
            color: #b0b0b0;
            text-decoration: line-through;
          }
        }
      }
    }
    .more {
      font-size: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #333333 !important;
    }
  }
}
.attr-list {
  width: 100%;
  background-color: #f5f5f5;
  margin-top: 30px;
}
.box-bd {
  width: 1225px;
  margin: 0 auto;
  display: flex;
}
</style>
